<template>
  <div>
    <!-- 1.top-电子单-步骤条 -->
    <div class="stepS">
      <!-- 准备 -->
      <div class="step-item">
        <div>
          <img
            v-if="pwsStatus.isReady !== 0"
            src="@/assets/iconfont/G1-copy.png"
            class="step-icon"
          />
          <img v-else src="@/assets/iconfont/G1.png" class="step-icon" />
        </div>
        <el-text>准备</el-text>
      </div>
      <span class="step-line"></span>

      <!-- 备料 -->
      <el-tooltip
        placement="top"
        :content="`备料开始时间: ${pwsStatus.beiliaoStart}<br>备料结束时间: ${pwsStatus.beiliaoEnd}`"
        raw-content
      >
        <div class="step-item">
          <div>
            <img
              v-if="pwsStatus.beiliaoStatus !== 0"
              src="@/assets/iconfont/G2-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G2.png" class="step-icon" />
          </div>
          <el-text>备料</el-text>
        </div>
      </el-tooltip>

      <span class="step-line"></span>

      <!-- 预混 -->
      <el-tooltip
        placement="top"
        :content="`预混开始时间: ${pwsStatus.premixStart}<br>预混结束时间: ${pwsStatus.premixEnd}`"
        raw-content
      >
        <div class="step-item">
          <div>
            <img
              v-if="pwsStatus.premixStatus !== 0"
              src="@/assets/iconfont/G3-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G3.png" class="step-icon" />
          </div>
          <el-text>预混</el-text>
        </div>
      </el-tooltip>
      <span class="step-line"></span>

      <!-- 后混 -->
      <el-tooltip
        placement="top"
        :content="`后混开始时间: ${pwsStatus.aftermixStart}<br>后混结束时间: ${pwsStatus.aftermixEnd}`"
        raw-content
      >
        <div class="step-item">
          <div>
            <img
              v-if="pwsStatus.aftermixStatus !== 0"
              src="@/assets/iconfont/G4-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G4.png" class="step-icon" />
          </div>
          <el-text>后混</el-text>
        </div>
      </el-tooltip>
      <span class="step-line"></span>

      <!-- 包装 -->
      <el-tooltip
        placement="top"
        :content="`包装开始时间: ${pwsStatus.packStart}<br>包装结束时间: ${pwsStatus.packEnd}`"
        raw-content
      >
        <div class="step-item">
          <div>
            <img
              v-if="pwsStatus.packStatus !== 0"
              src="@/assets/iconfont/G5-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G5.png" class="step-icon" />
          </div>
          <el-text>包装</el-text>
        </div>
      </el-tooltip>

      <span class="step-line"></span>

      <!-- 复核 -->
      <el-tooltip
        placement="top"
        :content="`复核时间: ${pwsStatus.fuheTime}`"
        raw-content
      >
        <div class="step-item">
          <div>
            <img
              v-if="pwsStatus.fuheStatus !== 0"
              src="@/assets/iconfont/G6-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G6.png" class="step-icon" />
          </div>
          <el-text>复核</el-text>
        </div>
      </el-tooltip>

      <!-- 质检 -->
      <el-tooltip
        placement="top"
        :content="`质检开始时间: ${pwsStatus.qaStart}<br>质检结束时间: ${pwsStatus.qaEnd}`"
        raw-content
      >
        <div class="step-item" style="margin-left: 100px">
          <div>
            <img
              v-if="pwsStatus.qaStatus !== 0"
              src="@/assets/iconfont/G7-copy.png"
              class="step-icon"
            />
            <img v-else src="@/assets/iconfont/G7.png" class="step-icon" />
          </div>
          <el-text>质检</el-text>
        </div>
      </el-tooltip>
    </div>

    <el-card class="maincardstyle">
      <!-- 标题 -->
      <h1 style="text-align: center">
        {{ $t("WorkOrder.ProcessWorkOrder") }}
      </h1>

      <!-- 2.表头 -->
      <div class="borderS">
        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> PWO NO </el-text>
            ：{{ formatOrderNo(headerData?.orderNo) }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Material No </el-text>
            ： {{ headerData?.matlNo }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Batch No </el-text>
            ： {{ headerData?.batchNo }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Rel Date </el-text>
            ： {{ headerData?.orderStartDate }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Deseription </el-text>
            ：{{ headerData?.matlDes }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Planned Qty </el-text>
            ： {{ headerData?.qty }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Plant </el-text>
            ： SG
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Mat. Type </el-text>
            ：{{ headerData?.orderType }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Prd. Version </el-text>
            ： {{ headerData?.productionVersion }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth">Schedule S.Date </el-text>
            ： {{ headerData?.orderStartDate }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> LABEL </el-text>
            ：
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> BOM AIt. </el-text>
            ： {{ headerData?.bomAlt }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Worked By </el-text> ：
          </el-col>
          <el-col class="borderS headerInput" :span="9">
            {{ headerData?.workedBy }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Recipe No </el-text>
            ： {{ headerData?.recipeNo }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> TANK NO </el-text> ：
          </el-col>
          <el-col class="borderS headerInput" :span="17">
            {{ headerData?.tankNo }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-row style="height: 60px">
              <el-text class="labelWidth"> Special Instruction </el-text>
            </el-row>
            <el-row>
              <el-text class="labelWidth"> Sales Notes </el-text>
            </el-row>
          </el-col>
          <el-col class="borderS" :span="9">
            <el-row style="height: 60px">
              <el-text class="headerInput" style="width: 100%">
                {{ headerData?.specialInstruction }}
              </el-text>
            </el-row>
            <el-row>
              <el-text class="headerInput" style="width: 100%">
                {{ headerData?.salesNotes }}
              </el-text>
            </el-row>
          </el-col>
          <el-col class="borderS" :span="8">
            <el-row>
              <el-text class="labelWidth"> Last Batch No</el-text> ：
              {{ headerData?.lastbatchNo }}
            </el-row>
            <el-row
              style="border-top: 2px solid #000; border-bottom: 2px solid #000"
            >
              <el-text class="labelWidth"> Last Batch Date </el-text> ：
              {{ headerData?.lastbatchDate }}
            </el-row>
            <el-row>
              <el-text class="labelWidth"> Last Prod Ver </el-text> ：
              {{ headerData?.lastprodVer }}
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 3.表格 -->
      <el-row class="tableS">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333' }"
        >
          <el-table-column align="center" type="index" fixed="left" />
          <el-table-column align="center" prop="step" label="Seq.No" width="" />
          <el-table-column
            align="center"
            prop="operation"
            label="Op.No"
            width=""
          />
          <el-table-column
            prop="ingreDesc"
            align="left"
            label="Comp. No / Resource / Description / Instruction"
            min-width="500"
          >
            <template #default="scope">
              <div v-if="scope.row.unit == 'KG'">
                {{ scope.row.ingreNo }} {{ scope.row.ingreDesc }}
              </div>
              <div v-if="scope.row.unit == 'INS'">
                {{ scope.row.remark }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="qty" align="center" label="QTY" width="" />
          <el-table-column prop="unit" align="center" label="UoM" width="" />
          <el-table-column
            prop="actual_usage"
            align="center"
            label="Actual Usage"
            width=""
          >
          </el-table-column>
          <el-table-column align="center" label="Check">
            <el-table-column align="center" prop="check1" label="1" width="100">
              <template #default="scope">
                <div v-if="scope.row.check1 == 0"></div>
                <div v-if="scope.row.check1 == 1">
                  <el-button type="success" :icon="Check" circle> </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="check2" label="2" width="100">
              <template #default="scope">
                <div v-if="scope.row.check2 == 0"></div>
                <div v-if="scope.row.check2 == 1">
                  <el-button type="success" :icon="Check" circle> </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="batch"
            align="center"
            label="Batch No"
            width=""
          />
        </el-table>
      </el-row>

      <el-divider />

      <!-- 4.qa -->
      <el-row class="tableS">
        <el-table
          :data="qaData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333' }"
        >
          <el-table-column align="center" label="In Process / Final Inspection">
            <el-table-column
              prop="item_spec"
              align="center"
              label="Item"
              width=""
            />
            <el-table-column
              prop="result"
              align="center"
              label="Result"
              width=""
            >
            </el-table-column>
            <el-table-column align="center" label="Sepc">
              <el-table-column
                align="center"
                prop="lower"
                label="Lower"
                width="100"
              />
              <el-table-column
                align="center"
                prop="upper"
                label="Upper"
                width="100"
              />
              <el-table-column
                align="center"
                prop="uom"
                label="UoM"
                width="100"
              />
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <!-- 公司log -->
    <!-- <el-row>
    <div class="kx-log-box">
      技术支持：
      <img
        class="imgstyle"
        src="@/assets/images/kxauto.png"
        alt="描述图片的文字"
      />
      西安开轩自动化有限责任公司
    </div>
  </el-row> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/router"; //路由跳转
import emitter from "@/utils/eventbus"; //引入bus
import {
  apiSearchgetPwsTableFromDatetime,
  apigetSapDataFromOrderNo,
  apigetOrderQaFromOrderNo,
  apiupdateSapData,
  apigetPwsStatusByOrderNo,
} from "@/api/tasksheet";
import { ElMessage, ElMessageBox } from "element-plus";
// 接受路由传参
import { useRoute } from "vue-router";

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";

const route = useRoute();
const orderNo = ref();
const headerData = ref({} as any);
const tableData = ref(); //table数组
const qaData = ref(); //qa数组
const pwsStatus = ref({}); //步骤条
// 获取表头数据
const getHeaderData = async (id: any) => {
  await apiSearchgetPwsTableFromDatetime({
    Order_Start_Date: "",
    order_type: "",
    order_no: id,
  })
    .then((res: any) => {
      if (res.code == 200) {
        headerData.value = res.data[0];
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

onMounted(() => {
  if (route.query.row) {
    orderNo.value = JSON.parse(route.query.row as string).orderNo;
    // headerData.value = JSON.parse(route.query.row as string);
    // orderNo.value = headerData.value.orderNo;
    getPwsStatusByOrderNo(orderNo.value); // 获取电子单-步骤条
    getHeaderData(orderNo.value); // 获取表头数据
    getfetchList(orderNo.value); // 获取电子单列表数据
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  }

  emitter.on("refreshQa", async () => {
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  });
  emitter.on("refreshActual", async () => {
    getfetchList(orderNo.value); // 获取电子单列表数据
  });
});
// 定义处理方法
const formatOrderNo = (orderNo: string | undefined) => {
  if (!orderNo) return ""; // 如果值为空，返回空字符串
  return orderNo.slice(4); // 去掉前四个字符
};
// 获取电子单列表数据
const getfetchList = async (id: any) => {
  await apigetSapDataFromOrderNo({ orderNo: id })
    .then((res: any) => {
      if (res.code == 200) {
        tableData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 获取Qa数据
const getOrderQaFromOrderNo = async (id: any) => {
  await apigetOrderQaFromOrderNo({ orderNo: id })
    .then((res: any) => {
      if (res.code == 200) {
        qaData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const getPwsStatusByOrderNo = async (id: any) => {
  await apigetPwsStatusByOrderNo({ orderNo: id })
    .then((res: any) => {
      if (res.code == 200) {
        pwsStatus.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 0px;
}

.topcardstyle {
  padding: 10px 20px 10px !important;
  margin-bottom: 10px;
  // background-color: #eee;
}

.maincardstyle {
  padding: 20px;
  margin: 20px;
}

.createbtnstyle {
  margin-bottom: 20px;
}

.inputstyle {
  width: 300px;
}

// 搜索
.demo-form-inline .el-name {
  --el-name-width: 220px;
}

.formstyle {
  margin-bottom: -18px;
}

// 分页
.demo-pagination-block {
  margin: 0 auto;
  margin-top: 15px;
  // margin-bottom: 35px;
}

// 小圆点
.istyleNo {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 5px;
}

.istyleOk {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 5px;
}

// 公司log
.kx-log-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 20px;
  line-height: 20px;
  margin-top: 15px;

  // 图片
  .imgstyle {
    width: 40px;
  }
}

.borderS {
  border: 1px solid #000;
  min-height: 30px;
  line-height: 30px;
}

.labelWidth {
  display: inline-block;
  min-width: 120px;
  padding-left: 10px;
}

.tableS {
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.headerInput {
  padding: 5px 20px;
}
::v-deep .el-table,
::v-deep .el-table__row,
::v-deep .el-table__cell {
  border: 1px solid #000 !important;
}

// 步骤条

::v-deep .el-step__title.is-process {
  color: #a8abb2;
  font-weight: 400;
}

.stepS {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 150px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 45px;
  height: 45px;
}

.step-line {
  flex-grow: 1;
  height: 2px;
  background-color: #ccc;
  margin: 0 10px;
}
</style>
